<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{role.manger.title}"> Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/* -189 是去掉左侧 菜单的宽度， -12是防止浏览器缩小页面 出现滚动条 恢复页面时 折行的问题 */
            _gridHeight = $(document).height()-65-67; /* -65 顶部主菜单高度， -67查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth - 75 - 150) /3;
            $("#flexigrid-tabl-id").flexigrid(  {
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/role/queryRoleListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'roleUuid',name : 'roleUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{role.name}]]*/"",name : 'roleName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.remarks}]]*/"",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'roleUuid',width : 150, sortable : false,align : 'center',process: function(v,_trid,_row){
                            // if([[${#authorization.expression("hasRole('ROLE_cldk_data_role_menu')")}]]) {
                            //     var contents = '';
                            //     //用户分配菜单
                            //     var assignMenuBtn = /*[[#{role.assign.menu}]]*/'';
                            //     contents +='<a  class="btn" title="' + assignMenuBtn +'" onclick="assignMenuInfo(\'' + v + '\')">';
                            //     contents +='<i class="glyphicon glyphicon-cd"></i>';
                            //     contents +='</a>';
                            // }
                            // return contents;
                            var contents = '<div style="align-items: center;justify-content: center;display: flex;flex-direction: row">';
                            // if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_update')")}]]){
                            var updateBtn =/*[[#{common.modify}]]*/'';
                            contents += "<a href='#' class='nav' style='color:#337ab7;'onclick=\"updateRoleInfoBtn(\'" + v + "\')\"><i class='fa fa-pencil-square-o'></i><span>" + updateBtn + "</span></a>";
                            // }
                            // var queryUserBtn =/*[[#{role.query.user}]]*/'';
                            // contents += "<a href='#' class='nav' style='color:#337ab7;margin-left: 10px'onclick='queryUserInfoByRoleBtn(\"" + v + "\")'><i class='fa fa-user'></i><span>" + queryUserBtn + "</span></a>";
                            var deleteBtn = /*[[#{role.delete}]]*/'';
                            contents += "<a href='#' class='nav' style='color:#337ab7;margin-left: 10px'onclick='deleteRoleInfoBtn(\"" + v + "\")'>" +
                                "<i class='fa fa-trash-o'></i><span>" + deleteBtn + "</span></a>";
                            contents += '</div>';
                            return contents;
                        }}
                ],
                resizable : false, //resizable table 是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起 ajax 请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击右键等
                rowbinddata : true
            });
            queryTable();
            //查询按钮
            $("#query-user-btn-id").click(function () {
                queryTable();
            });


            //增加
            $("#add-role-btn-id").click(function (event) {
                event.stopPropagation();
                $("#add-role-form-id").resetForm();
                $("#add-role-info-dialog-id").dialog('open');
            });
            $("#add-role-info-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{add.role.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var bRst = $("#add-role-form-id.auth").verification();
                            if (!bRst) {
                                return;
                            }
                            $("#add-role-form-id").submit();
                            message("增加成功");
                            // $(this).dialog("close");

                        }
                    },

                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // $("#add-role-form-id .auth").tipMessage();
            // //增加角色信息ajaxFrom请求
            // $("#add-role-form-id").ajaxForm({
            //     dataType: 'json',
            //     success: function (data) {
            //         if (data.code === 200) {
            //             $("#add-role-info-dialog-id").dialog('close');
            //             message(data.msg);
            //             queryTable();
            //         } else {
            //             message(data.msg);
            //         }
            //     },
            //     error: function (msg) {
            //         message(/*[[#{common.error}]]*/'');
            //     }
            // });

            $("#add-role-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    queryTable();
                    $("#add-role-info-dialog-id").dialog('close');
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            });

            $("#query-user-by-role-dialog-id").dialog({
                autoOpen: false,
                width: $(document).width(),
                height: $(document).height(),
                modal: true,
                resizable: false,
                title: /*[[#{role.query.user.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            //分配菜单对话框
            $("#assign-menu-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.assign.roles.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var menuIdArray = [];
                            var ztreeObj= $.fn.zTree.getZTreeObj("assign-menu-ztree-id");
                            var checkedNodes = ztreeObj.getCheckedNodes(true);
                            $(checkedNodes).each(function (index,item) {
                                menuIdArray.push(item.id);
                            });
                            var roleUuidArray = $("#assign-menu-dialog-id").attr("roleUuidArray");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/role/saveMenuRefRole}]]*/'',
                                data: [{name:"menuIdArray",value:menuIdArray},
                                    {name:"roleUuidArray",value: roleUuidArray}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#assign-menu-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            //批量分配菜单
            $("#assign-menu-btn-id").click(function () {
                var ids = $("#flexigrid-tabl-id").findFlexData(0);
                if (ids.length === 0){
                    message(/*[[#{common.select}]]*/'');
                    return;
                }
                $("#assign-menu-dialog-id").attr("roleUuidArray",ids);

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/role/queryMenuZtreeAll}]]*/'',
                    data: [
                    ],
                    success: function (data) {
                        $.fn.zTree.init($("#assign-menu-ztree-id"),assignSetting,data);
                        $("#assign-menu-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            });

            //角色详情
            $("#detail-role-dialog-id").dialog({
                autoOpen : false,
                width : 408,
                modal : true,
                resizable : false,
                title: /*[[#{user.detail.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#updata-role-form-id").ajaxForm({
                dataType:"json",
                success :function (data) {
                    message(data.msg);
                    $("#update-role-info-dialog-id").dialog('close');
                    queryTable();
                },

                error:function () {
                    message(/*[[#{common.error}]]*/'');
                }
            });

            $("#update-role-info-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.modify.info.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var bRst =$("form#updata-role-form-id input.auth").verification();
                            if(!bRst){
                                return;
                            }
                            $("#updata-role-form-id").submit();
                        }
                    },

                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
        });//ready
        //查询逻辑
        function queryTable() {
            var roleName = $("#search-role-name-id").val();
            $("#flexigrid-tabl-id").flexOptions({
                extParam:[
                    {name:"roleName",value:roleName}
                ]
            }).flexReload();
        }
        //ztree配置
        var assignSetting = {
            check:{
                enable:true
            },
            data:{
                simpleData:{
                    enable: true
                }
            }
        };
        //分配菜单
        function assignMenuInfo(roleUuid){
            $("#assign-menu-dialog-id").attr("roleUuidArray",roleUuid);

            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/role/queryZtreeByRoleId}]]*/'',
                data: [
                    {name:"roleUuid",value:roleUuid}
                ],
                success: function (data) {
                    $.fn.zTree.init($("#assign-menu-ztree-id"),assignSetting,data);
                    $("#assign-menu-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });


        }

        //删除
        function deleteRoleInfoBtn(roleUuid) {
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{deleteRoleInfo}]]*/'',
                data: [{
                    name: "roleUuid", value:roleUuid
                }],

                success: function (data) {
                    message(/*[[#{role.delete.info.success}]]*/);
                    queryTable();
                },

                error: function (msg) {
                    message(/*[[#{common.error}]]*/);
                }

            });
        }

        //角色详情
        function rowDbclick(r) {
            $(r).dblclick(function () {
               var columnArray = $(r).attr('ch').split("_FG$SP_");
                console.log("bbbb")
                $("#det-role-name").text(columnArray[1]);
                $("#det-role-remarks").text(columnArray[2]);

                $("#detail-role-dialog-id").dialog("open");
            });

        }

        //角色修改
        function updateRoleInfoBtn(roleUuid) {
            console.info(roleUuid);
            $("#up-role-uuid-id").val(roleUuid);
            $("#update-role-info-dialog-id").dialog('open');
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/role/queryRoleByRoleId}]]*/'',
                data: [{name:"roleUuid",value:roleUuid}],
                success: function (data) {
                    $("#up-role-name-id").val(data.roleName);
                    $("#up-remarks-id").val(data.remarks);
                    $("#update-role-info-dialog-id").dialog('open');
                },

                error: function (msg) {
                    message(/*[[common.error]]*/);
                }

            });
        }


        // //角色详情
        // function queryUserInfoByRoleBtn(roleUuid) {
        //     var path = /*[[${#request.getContextPath()}]]*/"";
        //     var url = path + "/role/queryUserInfoByRole?roleUuid=" + roleUuid;
        //
        //     $("#query-user-by-role-dialog-id").dialog('open');
        //     $("#query-user-by-role-iframe-id").attr("src", url);
        // }

    </script>
    <style>
        .tr{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 5px 0;
        }
    </style>
</head>
<body>
<nav>
    <span sec:authorize="hasRole('ROLE_cldk_data_role_query')" th:text="#{role.name}"></span>
    <input sec:authorize="hasRole('ROLE_cldk_data_role_query')" type="text" id="search-role-name-id">
    <a sec:authorize="hasRole('ROLE_cldk_data_role_query')" id="query-user-btn-id" class="btn">
        <i class="glyphicon glyphicon-search"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_role_add')" id="add-role-btn-id" class="btn">
        <i class="glyphicon glyphicon-plus-sign"></i>
        <span th:text="#{common.add}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_role_menu')" id="assign-menu-btn-id" class="btn" >
        <i class="glyphicon glyphicon-cd"></i>
        <span th:text="#{role.assign.menu}"></span>
    </a>

</nav>
<table sec:authorize="hasRole('ROLE_cldk_data_role_query')" id="flexigrid-tabl-id"></table>
    <div id="assign-menu-dialog-id" style="display: none">
        <ul id="assign-menu-ztree-id" class="ztree">
        </ul>
    </div>
<!--    <div id="query-user-by-role-dialog-id" style="display: none;">-->
<!--        <iframe id="query-user-by-role-iframe-id" style="border: 0;width: 100%;height: 100%;" th:src="@{/welcome}"></iframe>-->
<!--    </div>-->
    <!-- 增加dialog-->
    <div id="add-role-info-dialog-id" style="display: none">
        <form id="add-role-form-id" th:action="@{addroleInfoById}" method="post">

            <div class="form-group">
                <span th:text="#{role.name}"></span>
                <input  name="roleName" type="text" class="form-control auth menu-item"></input>
            </div>

            <div class="form-group">
                <span th:text="#{role.remarks}"></span>
                <input  name="remarks" type="text" class="form-control auth menu-item"></input>
            </div>
        </form>
    </div>

    <div id="detail-role-dialog-id" style="display: none">

        <div class="tr">
            <span class="td-left" th:text="#{role.name}"></span>
            <span class="td-right" id="det-role-name" ></span>
        </div>

        <div class="tr">
            <span class="td-left" th:text="#{role.remarks}"></span>
            <span class="td-right" id="det-role-remarks" ></span>
        </div>
    </div>

    <!-- 修改dialog-->
    <div id="update-role-info-dialog-id" style="display: none">
        <form id="updata-role-form-id" th:action="@{updateRoleInfoById}" method="post">
            <input id="up-role-uuid-id" type="hidden" Name="roleUuid" >

            <div class="form-group">
                <span th:text="#{role.name}"></span>
                <input class="form-control" id="up-role-name-id" type="text" name="roleName">
            </div>

            <div class="form-group">
                <span th:text="#{role.remarks}"></span>
                <input class="form-control" id="up-remarks-id" type="text" name="remarks">
            </div>

        </form>
    </div>
<!--    <div id="mod-role-dialog-id" style="display: none">-->
<!--        <form id="mod-user-form-id" method="post" th:action="@{/user/modifyUser}">-->
<!--            <input type="hidden" name="userUuid" id="mod-user-uuid-id">-->
<!--            <div class="form-group">-->
<!--                <span th:text="#{role.name}"></span><span style="color: red">*</span>-->
<!--                <input id="mod-role-name-id" class="form-control" type="text" name="userName"th:title="#{login.roleName.tip}">-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <span th:text="#{role.remarks}"></span><span style="color: red">*</span>-->
<!--                <input id="mod-remark-id" class="form-control" type="email" name="email" >-->
<!--            </div>-->


<!--        </form>-->
<!--    </div>-->
</body>
</html>